<template>
	<!-- 顶部 -->
	<view class="category-header"></view>
	<!-- 分类列表 -->
	<view class="scroll-container">
		<!-- 左侧大分类 -->
		<scroll-view class="left-scroll" :scroll-y="true">
			<view class="left-item" :class="{ active: index == currentLeftIndex }" v-for="(item, index) in categoryData"
				:key="item._id" @click="onLeftClick(index)">
				<text>{{item.cat_name}}</text>
			</view>
		</scroll-view>
		<!-- 右侧小分类 -->
		<scroll-view class="right-scorll" :scroll-y="true" :scroll-into-view="currentRightId"
			:scroll-with-animation="true" @scroll="onRightScroll">

			<view class="right-category" v-for="(item, index) in categoryData" :key="item._id">
				<!-- 右侧每一组分类的标题 -->
				<view class="right-title" :id="`rightTitle${index}`">{{item.cat_name}}</view>

				<view class="right-category-container">
					<view class="right-category-item" v-for="foodItem in item.children" :key="foodItem.cat_id">
						<image :src="foodItem.cat_icon" mode=""></image>
						<text>{{foodItem.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { getCategoryApi } from "../../api/category";
	import { ref } from "vue";

	const categoryData = ref([]);
	// 当前选中的右侧滚动条的目标元素的id
	const currentRightId = ref('rightTitle0');
	// 左侧选中的index
	const currentLeftIndex = ref(0);

	onLoad(() => {
		getData();
	})

	// 右侧分类列表滚动时触发
	function onRightScroll(event) {
		// 滚动条距离顶部的位移（滚动列表的偏移量）
		const scrollTop = event.detail.scrollTop;
		// 创建节点查询器
		const query = uni.createSelectorQuery();
		// 通过查询器获取节点信息
		query.selectAll('.right-category').boundingClientRect((nodes) => {
			let min = 0;
			let max = 0;
			nodes.forEach((item, index) => {
				min = max; // 上一轮的最大值，赋值给这一轮的最小值
				max += item.height;
				if (scrollTop + 1 >= min && scrollTop < max) {
					currentLeftIndex.value = index;
					currentRightId.value = '';
				}
			})

			// if(scrollTop >= 0 && scrollTop < 479) {
			// 	currentLeftIndex.value = 0;
			// } else if(scrollTop >= 479 && scrollTop < (479 + 205)) {
			// 	currentLeftIndex.value = 1;
			// }
		}).exec();
	}

	function onLeftClick(index) {
		currentLeftIndex.value = index;
		currentRightId.value = 'rightTitle' + index;
	}

	function getData() {
		getCategoryApi()
			.then(res => {
				if (res.code == 200) {
					categoryData.value = res.data;
				}
			})
	}
</script>

<style lang="scss" scoped>
	.category-header {
		height: 170rpx;
		background-color: $theme-color;
	}

	.scroll-container {
		display: flex;
	}

	.left-scroll,
	.right-scorll {
		// 在小程序中，100vh是排除了顶部导航栏的高度
		/* #ifndef WEB */
		height: calc(100vh - 170rpx);
		/* #endif */

		// 在浏览器中，100vh是包含了顶部导航栏的高度
		/* #ifdef WEB */
		height: calc(100vh - 170rpx - 44px - env(safe-area-inset-top));
		/* #endif */
	}

	.left-scroll {
		width: 180rpx;
		flex-shrink: 0;

		.left-item {
			height: 130rpx;
			font-size: 22rpx;
			line-height: 1;
			display: flex;
			align-items: center;

			text {
				width: 100%;
				text-align: center;
			}
		}

		// 左侧选中的样式
		.active {
			background-color: #f6f6f6;
			color: $theme-color;
		}

		.active::after {
			content: '';
			display: block;
			width: 2px;
			height: 24rpx;
			background-color: $theme-color;
		}

	}

	.right-scorll {
		background-color: #fcfcfc;
		padding: 0 20rpx;
	}

	.right-title {
		padding: 20rpx 0;
		color: #cbcbcb;
		font-size: 20rpx;
	}

	.right-category:not(:first-child) {
		.right-title {
			margin-top: 20rpx;
		}
	}

	.right-category-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.right-category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 10rpx;
			border-radius: 4rpx;
		}

		text {
			font-size: 18rpx;
			color: #767676;
		}
	}
</style>